{% extends 'base_templates/base.html' %}

{% load i18n static %}

{% block title %}收银台{% endblock %}

{% block breadcrumb %}
    <div class="container">
        <nav class="breadcrumb is-marginless mt-3 mb-3 is-small" aria-label="breadcrumbs">
            <ul>
                <li><a href="{% url 'goods:index' %}">首页</a></li>
                <li class="is-active">&emsp;订单支付</li>
            </ul>
        </nav>
    </div>
{% endblock %}

{% block container %}
    <div class="box is-marginless is-radiusless has-background-primary-dark has-text-white-bis">
        <h1 class="is-size-3">订单提交成功！订单将在24小时后过期，记得及时付款哟~</h1>
    </div>
    <div class="box is-radiusless" style="line-height: 30px;">
        <p>订单编号：{{ trade_no }}</p>
        <p>订单总额：{{ total_amount }}元</p>
        <p>收货信息：{{ address }}</p>
    </div>

    <div class="box is-radiusless">
        <h1 class=" is-size-4">订单商品</h1>
        <div class="dropdown-divider"></div>
        {% for goods_order in goods_orders %}
            <div class="columns">
                <div class="column is-2 is-flex is-justify-content-center">
                    <figure class="image is-128x128">
                        <img src="{{ goods_order.image }}" alt="{{ goods_order.name }}">
                    </figure>
                </div>
                <div class="column is-flex is-flex-direction-column is-justify-content-center">
                    <h1 class=" has-text-weight-bold">{{ goods_order.name }}</h1>
                    <div class="has-text-grey-light">
                        {% for option in goods_order.options %}
                            <span class="mr-3">{{ option.spec }}：{{ option.name }}</span>
                        {% endfor %}
                    </div>
                </div>
                <div class="column is-2 is-flex is-justify-content-center is-align-items-center">
                    {{ goods_order.goods_dynamics.price }}x{{ goods_order.count }}
                </div>
            </div>
            <div class="dropdown-divider"></div>
        {% endfor %}
    </div>

    <div class="box is-radiusless">
        <h1 class=" is-size-4">支付方式</h1>
        <div class="dropdown-divider"></div>
        {% include 'base_templates/paymethods.html' %}
        <div class="dropdown-divider"></div>
        <div class="has-text-right" id="nowPay">
            <button class="button is-danger is-large pl-6 pr-6" @click="savePay">立即支付</button>
        </div>
    </div>
{% endblock %}

{% block vue %}
    <script>
        var nowPay = new Vue({
            el: '#nowPay',
            delimiters: ['{$', '$}'],
            data: {},
            methods: {
                savePay() {
                    request({
                        url: "{% url 'order:pay' order_id %}",
                        method: 'post',
                        data: {
                            method: payMethod._data.defaultPay.value
                        }
                    }).then(res => {
                        // 捕获错误信息
                        if (!res.data.success) {
                            bayke.toastMessage('is-danger', res.data.errmsg);
                            return
                        }
                        if (res.data.pay_method === 3) {
                            bayke.toastMessage('is-success', '正在跳转到支付宝...')
                            setTimeout(() => {
                                window.open(res.data.payment_url)  // 开发环境
                                // location.href = res.data.payment_url  // 生产环境
                            }, 2000);
                            this.check_alipay_status()  // 开发环境使用，生产环境需要将其注释
                        } else if (res.data.pay_method === 4) {
                            this.pay_success()
                        }
                    })
                },
                pay_success() {
                    bayke.toastMessage('is-success', '订单支付成功，正在跳转...')
                    setTimeout(() => {
                        location.href = "{% url 'order:payok' order_id %}"
                    }, 2000);
                },
                // 开发环境中监听支付宝支付状态
                check_alipay_status() {
                    const url = '{% url 'order:check' %}';
                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': getCookie('csrftoken'),
                        },
                        body: JSON.stringify({
                            trade_no: {{ trade_no }}
                        })
                    }).then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    }).then(data => {
                        // 处理响应数据
                        if (data.success) {
                            this.pay_success()
                        } else {
                            bayke.toastMessage('is-danger', data.errmsg);
                        }
                    })
                }
            },
        })
    </script>
{% endblock %}
    